@charset "utf-8";
@import "_reset.scss";
@function r($px){
	@return $px / 64px *1rem;
}
.wrap{
	width:r(640px);
	height:r(1096px);
	background-color:#f3f4f6;
	.header{
		position:fixed;
		top:0;
		width:100%;
		height:r(87px);
		background-color:#f7f7f7;
		font-size:r(28px);
		border-bottom:1px solid #e3e3e3;
		z-index:5;
		.header_left{
			width:r(22px);
			height:r(37px);
			float:left;
			margin-left:r(29px);
			margin-top:r(26px);
			img{
				height:100%;
			}
		}
		.header_right{
			width:r(40px);
			height:r(40px);
			float:right;
			margin:{
				top:r(27px);
				right:r(26px);
			}
			img{
				height:100%;
			}
		}
		.header_title{
			display:inline-block;
			text-align:center;
			width:r(400px);
			height:r(60px);
			margin:{
				left:r(69px);
				top:r(14px);
			}
			color:#333333;
			border-radius:5px;
			font-size:r(35px);
			line-height:r(60px);
		}
	}
	.content{
		width:100%;
		font-size:0;
		margin-top:r(87px);
		.con_head{
			width:100%;
			height:r(280px);
			background:url("../img/userinfo_bg.jpg");
			background-size:100% 100%;
			.head_top{
				width:100%;
				height:r(190px);
				.wodeImg{
					position:relative;
					display:inline-block;
					top:r(30px);
					left:r(30px);
					width:r(129px);
					height:r(129px);
					border-radius:50%;
					border:2px solid #e3e3e3;
					img{
						width:100%;
						height:100%;
						border-radius:50%;
					}
				}
				h2{
					display:inline;
					vertical-align:top;
					position:relative;
					top:r(70px);
					margin-left:r(51px);
					font-size:r(35px);
					color:#fff;
				}
				p{	
					float:right;
					font-size:r(24px);
					color:#fff;
					margin-top:r(20px);
					margin-right:r(20px);
				}
				&::after{
					display:block;
					content:"";
					clear:both;
				}
			}
			.head_bottom{
				width:100%;
				height:r(90px);
				font-size:0;
				ul{
					width:100%;
					height:100%;
					li{
						width:33.3%;
						height:100%;
						background-color:rgba(40,40,40,0.3);
						float:left;
						text-align:center;
						font-size:r(24px);
						color:#fff;
						border-right:1px solid rgba(280,280,280,.2);
						p:first-of-type{
							margin-top:r(10px);
						}
						p:last-of-type{
							margin-top:r(5px);
						}
					}
					&:after{
						display:block;
						content:"";
						clear:both;
					}
				}
			}
		}
		.item{
			width:100%;
			height:r(89px);
			border-top:1px solid #e3e3e3;
			border-bottom:1px solid #e3e3e3;
			background:#fff;
			font-size:0;
			img{
				display:inline-block;
				width:r(45px);
				height:r(45px);
				margin-top:r(22px);
				margin-left:r(20px);
			}
			span{
				vertical-align:top;
				display:inline-block;
				line-height:r(89px);
			}
			.item_title{
				font-size:r(28px);
				color:#333333;
				margin-left:r(20px);
			}
			.item_right{
				float:right;
				font-size:r(24px);
				color:#cccccc;
			}
			i{
				float:right;
				color:#cccccc;
				font-size:r(50px);
				line-height:r(89px);
			}
			&::after{
				display:block;
				content:"";
				clear:both;
			}
		}
		.dingdan{
			margin-top:r(30px);
		}
		.tixian{
			margin-top:r(30px);  
			border-bottom:1px solid #e3e3e3;
		}
		.jiaoliu{
			margin-top:r(30px);
			border-bottom:0;
		}
		.bangzhu{
			border-bottom:0;
		}
		.tuijian{
			margin-top:r(30px);
		}
		.list{
			width:100%;
			height:r(120px);
			background:#fff;position: static;
			border-bottom:1px solid #e3e3e3;
			ul{
				width:100%;
				height:100%;
				li{
					float:left;
					width:25%;
					height:100%;
					text-align:center;
					img{
						display:inline-block;
						width:r(44px);
						height:r(40px);
						margin-top:r(26px);
					}
					p{
						color:#999999;
						font-size:r(24px);
						margin-top:r(10px);
					}
				}
				&::after{
					display:block;
					content:"";
					clear:both;
				}
			}
		}
	}
	.mask{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index:9;
		display: none;
		.mask_content{
			position: absolute;
			bottom:0;
			left: 0;
			background:#ffffff;
			width:100%;
			height:r(716px);
			.con_item{
				width:100%;
				padding:{
					left:r(20px);
					right:r(20px);
				}
				height:r(205px);
				font-size:0;
				ul{
					width:100%;
					height:100%;
					li{
						float:left;
						width:33.3%;
						height:100%;
						text-align:center;
						padding-top:r(40px);
						img{
							display:block;
							width:r(105px);
							height:r(105px);
							margin:0 auto;
						}
						p{
							margin-top:r(18px);
							font-size:r(24px);
							color:#999999;
						}
					}
				}
			}
			.quxiao{
				width:100%;
				height:r(99px);
				border-top:1px solid #e3e3e3;
				font-size:r(35px);
				color:#333333;
				text-align:center;
				line-height:r(99px);
			}
		}
	}
}